<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<link href="../../css/header.css" rel="stylesheet" />
		<style type="text/css">
			.mui-content .mui-table-view li {
				padding-right: 10px;
			}
		</style>
	</head>

	<body>
		<!-- <header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left title-color"></a>
			<span class="mui-title title-color" style="text-align: left; margin-top: 2px;">个人信息</span>
		</header> -->
		<header class="mui-bar mui-bar-nav title">
			<span class="mui-action-back nav mui-pull-left title-color" style="line-height: 44px; margin-left: 5px;">个人信息</span>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a id="head-portrait" href="javascript:;">
						<span class="mui-pull-right mui-icon mui-icon-arrowright" style="line-height: 42px;color: lightgray;margin-left: 3px;"></span>
						<img id="thum_head_portrait" class="mui-media-object mui-pull-right" src="../../image/face-default-cat.png">
						<div class="mui-media-body" style="line-height: 42px;font-size: 16px;">
							头像
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a id="btn_nickname" href="javascript:;">
						<span class="mui-pull-right mui-icon mui-icon-arrowright" style="color: lightgray;margin-left: 3px;"></span>
						<span id="nickname" class="mui-pull-right" style="color: gray;font-size: 14px;"></span>
						<div class="mui-media-body">
							昵称
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<span id="account" class="mui-pull-right" style="color: gray;font-size: 14px; margin-right: 10px;;"></span>
						<div class="mui-media-body">
							账号
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a id="btn_qr_code" href="javascript:;">
						<span class="mui-pull-right mui-icon mui-icon-arrowright" style="color: lightgray;margin-left: 3px;"></span>
						<img class="mui-media-object mui-pull-right" src="../../image/qrcode.png" style="max-width: 24px;height: 20px;">
						<div class="mui-media-body">
							二维码名片
						</div>
					</a>
				</li>
			</ul>

			<br />

			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_logout" href="javascript:;">
						<div class="mui-media-body">
							退出登录
						</div>
					</a>
				</li>
				<!-- <li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_clear" href="javascript:;">
						<div class="mui-media-body">
							清除缓存
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_chat_history" href="javascript:;">
						<div class="mui-media-body">
							查看缓存历史
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_chat_snapshot" href="javascript:;">
						<div class="mui-media-body">
							查看缓存快照
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_friends" href="javascript:;">
						<div class="mui-media-body">
							查看缓存好友
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_user" href="javascript:;">
						<div class="mui-media-body">
							查看缓存用户
						</div>
					</a>
				</li> -->
			</ul>

		</div>
		<script src="../../js/mui.js"></script>
		<script src="../../js/app.js"></script>
		<script type="text/javascript">
			mui.init()

			mui.plusReady(function() {

				// 获得当前的webview，刷新当前用户信息
				var currentWebview = plus.webview.currentWebview();
				currentWebview.addEventListener("show", function() {
					refreshUserInfo();
				});

				// 页面跳转，我的头像
				var headPortrait = document.getElementById("head-portrait");
				headPortrait.addEventListener("tap", function() {
					mui.openWindow("head-portrait.html", "head-portrait.html");
				});

				// 页面跳转，修改昵称
				var btnNickname = document.getElementById("btn_nickname");
				btnNickname.addEventListener("tap", function() {
					mui.openWindow("nickname.html", "nickname.html");
				});

				// 添加自定义事件，刷新头像
				window.addEventListener("refresh", function() {
					refreshUserInfo();
				});

				// 查看我的二维码
				var btnQrCode = document.getElementById("btn_qr_code");
				btnQrCode.addEventListener("tap", function() {
					mui.openWindow("qr-code.html", "qr-code.html");
				});

				// 清除缓存
				var btnClear = document.getElementById("btn_clear");
				btnClear.addEventListener("tap", function() {
					plus.storage.clear();
					mui.openWindow("../../login.html", "login.html");
				});

				// 用户退出
				var btnLogout = document.getElementById("btn_logout");
				btnLogout.addEventListener("tap", function() {
					app.logout();
					mui.openWindow("../../login.html", "login.html");
				});

				// 本地聊天历史记录
				var btn_chat_history = document.getElementById("btn_chat_history");
				btn_chat_history.addEventListener("tap", function() {
					var user = app.getUserGlobalInfo();
					console.log("user.id ==> "+user.id);
					var chatHistory = app.getChatHistory(user.id, 17);
					console.log(JSON.stringify(chatHistory));
				});

				// 本地聊天快照记录
				var btn_chat_snapshot = document.getElementById("btn_chat_snapshot");
				btn_chat_snapshot.addEventListener("tap", function() {
					var user = app.getUserGlobalInfo();
					console.log("user.id ==> "+user.id);
					var chatSnapshot = app.getChatSnapshot(user.id);
					console.log(JSON.stringify(chatSnapshot));
				});

				// 本地好友列表记录
				var btn_friends = document.getElementById("btn_friends");
				btn_friends.addEventListener("tap", function() {
					var user = app.getUserGlobalInfo();
					console.log("user.id ==> "+user.id);
					var friendList = app.getFriendList(user.id);
					console.log(JSON.stringify(friendList));
				});

				// 本地好友列表记录
				var btn_user = document.getElementById("btn_user");
				btn_user.addEventListener("tap", function() {
					var user = app.getUserGlobalInfo();
					console.log(JSON.stringify(user));
				});
			});

			function refreshUserInfo() {
				var user = app.getUserGlobalInfo();

				if (user != null) {
					var thumHeadPortrait = user.thumHeadPortrait;
					document.getElementById("nickname").innerHTML = user.nickname;;
					document.getElementById("account").innerHTML = user.account;;

					if (app.isNotNull(thumHeadPortrait)) {
						var thum_head_portrait = document.getElementById("thum_head_portrait");
						thum_head_portrait.src = app.fileServerUrl + thumHeadPortrait;
					}
				}

			}
		</script>
	</body>

</html>
